<!--培训内容分类-->
<div class="scs-contents-type">
  <h2 class="title text-center pt-3 pb-3 text-littleGray">培训内容库分类</h2>
  <div class="header pt-2 pb-2">
    <div class="ui-inputgroup">
      <input type="text" pInputText placeholder="请输入关键字" [(ngModel)]="typeOperateField.contentCategoryName">
      <button pButton label="搜索" (click)="typeOperate('search')"></button>
      <button pButton label="重置" class="ui-button-pink"  (click)="typeOperate('reset')"></button>
    </div>
    <div class="button">
      <button
        pButton type="button" label="分类添加"
        class="ui-button-rounded ui-corner-left ui-button-pink"
        (click)="typeOperate('add')">
      </button>
    </div>
  </div>
  <div class="content">
    <p-table
      [value]="typeTableData" [columns]="typeTableHeader"
      [scrollable]="true" scrollHeight="90%"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
          <th>操作</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr>
          <td>{{rowIndex + 1}}</td>
          <td *ngFor="let col of columns">
            {{rowData[col.field]}}
          </td>
          <td>
            <button pButton label="编辑" class="ui-button-rounded mr-3" (click)="typeOperate(typeOperateFlag='update',rowData)"></button>
            <button pButton label="删除" class="ui-button-rounded ui-button-pink" (click)="typeOperate(typeOperateFlag='del',rowData)"></button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div class="pagination">
    <app-pagination [option]="typePageOption" (clickEvent)="typePageEvent($event)"></app-pagination>
  </div>
  <div class="modal">
    <!--内容库分类添加/编辑弹窗-->
    <p-dialog
      [blockScroll]="true"
      [(visible)]="typeOperateModal" [style]="{width: '50vw'}"
    >
      <p-header>添加内容库分类</p-header>
      <div style="width: 100%;height: 30vh;overflow: hidden">
        <p-scrollPanel [style]="{width: '100%', height: '100%'}" styleClass="role-scroll">
          <div class="ui-g">
            <!--分类名称-->
            <div class="ui-g-12 ui-md-12">
              <label class="ui-g-3 ui-md-3 label">
                <span>分类名称：</span>
              </label>
              <div class="ui-g-9 ui-md-9 input">
                <input type="text" style="width: 100%" pInputText placeholder="请输入分类名称" [(ngModel)]="typeOperateField.contentCategoryName">
              </div>
            </div>
          </div>
        </p-scrollPanel>
      </div>
      <p-footer>
        <button pButton label="保存" (click)="typeOperate(typeOperateFlag = 'save')"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="typeOperateModal = false"></button>
      </p-footer>
    </p-dialog>
  </div>
</div>

